<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>news</title>
	<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.6.6/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.6.6/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.6.6/themes/color.css">
	<script type="text/javascript" src="../js/jquery.min.js"></script>
	<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../js/xheditor-1.2.2/xheditor-1.2.2.min.js"></script>
    <script type="text/javascript" src="../js/xheditor-1.2.2/xheditor_lang/zh-cn.js"></script>
</head>
<body class="easyui-layout">
	<!-- 分类 -->
	<div data-options="region:'west',split:true" style="width:170px;">
		<ul id="tt"></ul>
	</div>
	<div data-options="region:'center'" style="overflow:auto">
		<!-- 按钮 -->
		<div id="tb" style="height:33px;padding-top:3px;background:#efefef;">
			&nbsp;&nbsp;标题：<input class="easyui-searchbox" data-options="prompt:'请输入',searcher:doSearch" style="width:200px">
			<a href="#" id="add" class="easyui-linkbutton" data-options="iconCls:'icon-add'" onclick="$('#dlg').dialog('open');" style="display:none">添加新闻</a>
			<a href="#" id="removesData" class="easyui-linkbutton l-btn l-btn-small" iconcls="icon-remove" group="" onclick="myhandler()">
				批量删除
			</a>
		</div>
		<!-- 数据列表 -->
		<table id="dg" style="height:93%; overflow: auto"></table>
		<!-- 添加新闻的弹出框 -->
		<div id="dlg" class="easyui-dialog" title="添加新闻"" data-options="closed:true,iconCls:'icon-save'" style="width:700px;height:420px;padding:10px">
			<form id="ff" method="post" style="overflow: hidden;">
				<input type="hidden" name="_id">
				<div style="margin-bottom:20px;float: left;">
					<input class="easyui-textbox" name="title" style="width:300px" data-options="label:'标题：',required:true">
				</div>
				<div style="margin-bottom:20px;float: left;">
					<span style="margin-right:40px;">内容：</span>
					<textarea name="content" style="width:510px;height:130px;" id="elm1" class="xheditor"></textarea>
				</div>
				<div style="margin-bottom:20px;float: left;margin-right:20px;">
					<input class="easyui-textbox" name="author" style="width:250px" data-options="label:'记者：',required:true">
				</div>
				<div style="margin-bottom:20px;float: left;margin-right:20px;">
					<input id="dd" class="easyui-datebox" name="datetime" data-options="label:'发布日期：',required:true,formatter:myformatter,parser:myparser" style="width:250px;margin-left:20px">
				</div>
				<div style="float: left;margin-right:20px;">
					分类:	<input name="cate" id="cate" style="width:250px;margin-left:50px;width: 162px;line-height: 28px;font-size: 14px;color: #aaa;border:1px #95B8E7 solid;border-radius: 5px;" value="" >
				</div>
				<div style="margin-bottom:20px;float: left;margin-right:20px;">
					<input class="easyui-textbox" name="source" style="width:250px" data-options="label:'来源：'">
				</div>
				<div style="margin-bottom:20px;float: left;margin-right:20px;">
					<input class="easyui-textbox" name="keyword" data-options="label:'关键字：'" style="width:250px;margin-left:20px">
				</div>
				<div style="margin-bottom:20px;float: left;margin-right:20px;">
					<input class="easyui-textbox" name="comment" data-options="label:'评论数：'" style="width:150px;margin-left:20px">
				</div>
				<div style="margin-bottom:20px;float: left;margin-right:20px;">
					<input class="easyui-textbox" name="like" data-options="label:'点赞数：'" style="width:150px;margin-left:20px">
				</div>
			</form>
			<div style="text-align:center;padding:5px 0">
				<a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px;margin-right:20px;">提交</a>
				<a href="javascript:void(0)" class="easyui-linkbutton" id="clearbtn" style="width:80px">清除</a>
			</div>
		</div>
	</div>
	<script src="../js/jquery.serializejson.min.js"></script>
	<script>
		// 搜索数据
		function doSearch(value) {
			$('#dg').datagrid({
				url: 'http://localhost:3000/news/list',
				method: 'post',
				pagination:true,
				queryParams:{
					dimtitle:value
				}
			});
		}
		// 表格数据
		$('#dg').datagrid({
			url: 'http://localhost:3000/news/list',
			method: 'post',
			pagination:true,
			columns: [[
				{field: 'ck',checkbox: true},
				{field: 'title',title: '标题',width: 200,align: 'center'},
				{field: 'content',title: '内容',width: 306,align: 'center'},
				{field: 'author',title: '记者',width: 80,align: 'center'},
				{field: 'datetime',title: '发布时间',width: 100,align: 'center'},
				{field: 'cate',title: '分类',width: 100,align: 'center'},
				{field: 'keyword',title: '关键字',width: 100,align: 'center'},
				{field: 'source',title: '来源',width: 100,align: 'center'},
				{field: 'comment',title: '评论数',width: 60,align: 'center'},
				{field: 'like',title: '点赞数',width: 70,align: 'center'},
				{field:'_id',title:'操作', width:120,align: 'center',
				formatter:function(value,row,index){
				return `<a href="javascript:editData('${row._id}')" class="easyui-linkbutton c4 abtn" style="width:50px;height:25px;margin-top:1px">修改</a> <a href="javascript:deleData('${row._id}')" class="easyui-linkbutton c3 abtn" style="width:50px;height:25px;margin-top:1px">删除</a> `
				}}
			]],
			onLoadSuccess:function(){
				$('.abtn').linkbutton();
			}
		});
		// 属性结构--分类
		$('#tt').tree({
			url:'http://localhost:3000/classify/list/2',
			method:'post',
			onClick: function(node){ //点击分类节点，匹配出对应的分类的新闻
				// 点击选中分类，添加新闻的按钮出现，对话框里的分类的值就为当前点击的分类值
				$('#add').show();
				$('#cate').val(node.text);
				
				var arr=[];
				function getText(obj){
					arr.push(obj.text);
					if(obj.children){
						$(obj.children).each(function(index,value){
							getText(value);
						})
					}
				}
				getText(node);
				$('#dg').datagrid({
					url: 'http://localhost:3000/news/list',
					method: 'post',
					pagination:true,
					queryParams:{
						dimcate:arr.toString()
					}
				});
			}
		});
		// 批量删除
		function myhandler(){
			$.messager.confirm('提示', '你确认删除数据？', function(r){
				if (r){
					// 选中的所有对象的id
					var selections=$('#dg').datagrid('getSelections');
					console.log(selections);
					if(selections.length>0){
						var ids=[];
						for(let i=0;i<selections.length;i++){
							ids.push(selections[i]._id);
						}
						$.ajax({
							url:'http://localhost:3000/news/data/removes',
							type:'post',
							data:{
								ids:ids.toString()
							}
						}).then(res=>{
							$("#dg").datagrid("reload");
						});
					}
				}
			})	
		}
		// 发布时间
		function myformatter(date){
			var y = date.getFullYear();
			var m = date.getMonth()+1;
			var d = date.getDate();
			return y+'-'+(m<10?('0'+m):m)+'-'+(d<10?('0'+d):d);
		}
		function myparser(s){
			if (!s) return new Date();
			var ss = (s.split('-'));
			var y = parseInt(ss[0],10);
			var m = parseInt(ss[1],10);
			var d = parseInt(ss[2],10);
			if (!isNaN(y) && !isNaN(m) && !isNaN(d)){
				return new Date(y,m-1,d);
			} else {
				return new Date();
			}
		}
		// 提交
		function submitForm(){
			$('#ff').form('submit',{
				onSubmit:function(){
					if( $(this).form('enableValidation').form('validate') ){
						// 表单验证成功
						var formData = $("#ff").serializeJSON();
						if(formData._id.length>0){
							$.ajax({
								url:'http://localhost:3000/news/data/' + formData._id,
								type:'put',
								data: formData
							}).then(res=>{
								$('#dlg').dialog('close');
								$('#ff').form('clear');
								$('.editMode').html('');
								$("#dg").datagrid("reload");
							})
						}else{
							delete formData._id;
							$.ajax({
								url:'http://localhost:3000/news/data',
								type:'post',
								data: formData
							}).then(res=>{
								$('#dlg').dialog('close');
								$("#dg").datagrid("reload");
								$('#ff').form('clear');
								$('#dlg').find('.xheditor').val('');
							})
						}

					}
				}
			});
		}
		// 清除
		$('#clearbtn').on('click',function(){
			$('#dlg').find('.xheditor').val('');
			$('#ff').form('clear');
		})
		//修改
		function editData(id){
			$('#dlg').dialog('open');
			$('#ff').form('load','http://localhost:3000/news/data/'+id);
			$("#dg").datagrid("reload");
			// 关闭对话框，清除数据
			$('.panel-tool-close').on('click',function(){
				$('#ff').form('clear');
				$('#dlg').find('.xheditor').val('');
				$('#dlg').dialog('close');
			})
		}
		// 删除
		function deleData(id){
			$.messager.confirm('提示', '你确认删除该数据？', function(r){
				if (r){
					$.ajax({
						url:'http://localhost:3000/news/data/'+id,
						type:'delete'
					}).then(res=>{
						$("#dg").datagrid("reload");
					})
				}
			});
		}

		$('#add').on('click',function(){
		  $('#cate').val($('.tree-node-selected').find('.tree-title').html());
		})
	</script>
</body>
</html>